<template>
  <div
    class="suction-edge z-200"
    :class="{ [network?.network]: true && !network.loading, loading: currentDefinition === selectDefinition && network.loading, 'show-definition': !isExpand }"
    @touchstart.prevent="handleExpand"
  >
  </div>
  <transition name="zoom-left">
    <div
      v-show="isExpand"
      class="definition-container z-200"
      :class="{ 'no-logo': !hasLogo, 'put-away': !isExpand }"
    >
      <div
        v-for="item in network.list"
        :key="item.value"
        class="definition-item flc"
        @click.prevent="onChange(item.value)"
      >
        <div
          class="definition"
          :class="{ 'check': currentDefinition === item.value }"
        >
          {{ item.label }}
        </div>
      </div>
    </div>
  </transition>
</template>
<!-- 清晰度选择 -->
<script
  lang="ts"
  name="XDefinition"
  setup
>
import { useNetworkStore } from '@/store/network'
import { useConfigStore } from '@/store/config'

const config = useConfigStore();
const network = useNetworkStore();
const isExpand = ref(false);
const selectDefinition = ref('good');
const hasLogo = computed(() => config.logo_is_show && config.logo);
const currentDefinition = computed(() => network.getValue())

const onChange = (v: string) => {
  handleExpand();
  if (network.getValue() === v) {
    return;
  }
  network.adj(v);
  selectDefinition.value = v;
}

const handleExpand = () => {
  isExpand.value = !isExpand.value;
}

watch(isExpand, (current, prev) => {
  if (current && !prev) {
    const timer = setTimeout(() => {
      isExpand.value = false;
      clearTimeout(timer)
    }, 5000)
  }
})
</script>
<style
  lang="scss"
  scoped
>
.suction-edge {
  position: absolute;
  top: 66px;
  left: 0;
  width: 26px;
  height: 26px;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 0px 6px 6px 0px;
  opacity: 0;
  transition: all 0.5s;

  &.good::before {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    width: 6px;
    height: 6px;
    background: #02BB20;
    border-radius: 50%;
  }

  &.bad::before {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    width: 6px;
    height: 6px;
    background: #DF1515;
    border-radius: 50%;
  }

  &.loading::before {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    width: 10px;
    height: 10px;
    background: url(../../assets/images/loading.png) no-repeat center center / cover;
    animation: loading 1s infinite;
  }

  @keyframes loading {
    from {
      transform: rotate(0);
    }

    to {
      transform: rotate(360deg);
    }
  }

  &.show-definition {
    opacity: 1;
  }
}

.definition-container {
  position: absolute;
  left: 22px;
  top: 66px;
  overflow: hidden;
  width: 75px;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 6px;
  transition: all 0.5s ease;

  .definition-item {
    height: 24px;
    width: 100%;
    font-size: 12px;
    font-weight: 400;
    color: #FFFFFF;
    line-height: 14px;
    letter-spacing: 2px;
    transition: all 0.3s ease;

    &:active {
      background: rgba(0, 0, 0, 0.1);
    }

    .definition {
      position: relative;
      margin-left: 10px;
      margin-top: 4px;
      margin-bottom: 4px;

      &::before {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        left: -13px;
        margin: auto;
        width: 8px;
        height: 8px;
        background: rgba(0, 0, 0, 0.15);
        border-radius: 50%;
      }

      &.check::before {
        background-color: #02BB20;
      }
    }
  }
}

.zoom-left-enter-active {
  transition: all 0.5s ease;
}

.zoom-left-leave-active {
  transition: all 0.3s ease;
}

.zoom-left-enter-from,
.zoom-left-leave-to {
  /* transform: scale(0.6);
  transform-origin: 0% 50%; */
  opacity: 0;
  transform: scale(0.1) translateX(-200px);
}
</style>
